<template>
	<div class="back-top-btn" :class="[{'topHeight':message!=''},{'position-unset':position=='unset'},{'lowHeight':lowHeight}]"  @click="backToTop" v-show="backTopBtnShow"></div>
</template>

<script>
export default {
	data() {
		return {
			// pageHeight: window.innerHeight - 94,
			pageHeight: uni.getSystemInfoSync().windowHeight - 94,
			backTopBtnShow: false
		}
	},
	props:{
		message: {
			type: [String,Boolean],
			default: ''
		},
		position: {
			type: String,
			default: ''
		},
		lowHeight: {//无底部按钮,高度调低
			type: Boolean,
			default: false
		}
    },
	methods: {
		backToTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
		},
		viewBtn(scrollTop){
			if(scrollTop > this.pageHeight){
				this.backTopBtnShow = true;
			}else{
				this.backTopBtnShow = false;
			}
		}
	}
};
</script>

<style>
	.back-top-btn{
		width: 88rpx;
		height: 88rpx;
		background-image: url('https://ss.migudm.cn/malleoc/img/backTopBtn/ic_backtop@2x.png');
		background-size: contain;
		background-repeat: no-repeat;
		position: fixed;
		bottom: 130rpx;
		right: 30rpx;
		z-index: 10;
		margin-bottom: env(safe-area-inset-bottom);
	}
	.back-top-btn.topHeight{
		bottom: 200rpx;
		margin-bottom: env(safe-area-inset-bottom);
	}
	.position-unset{
		position: unset;
	}
	.back-top-btn.lowHeight{
		bottom: 48rpx;
	}
</style>
